<template>
	<view class="content">

		<view class="form" v-if="unionId && step == -1">

			<view
				style="width: 670rpx;margin-top: 140rpx;margin-bottom: 140rpx;font-size: 80rpx;letter-spacing: 5rpx;display: flex;flex-direction: row;">
				你的微信账号尚未注册，先绑定一下手机号吧</view>

			<view class="inputWrapper">
				<input class="input" style="background-color: #f5f5f5 !important;" type="number" v-model="tel"
					placeholder="请输入手机号" />
			</view>
			<view class="inputWrapper">
				<input type="number" class="input" style="background-color: #f5f5f5 !important;" v-model="code"
					placeholder="请输入验证码" />
			</view>
			<view style="width: 600rpx;display: flex;flex-direction: row;justify-content: flex-end;margin-top: 20rpx;">
				<text @click="onSMSSend()">{{ getSendBtnText}}</text>
			</view>

			<view class="loginBtn" style="margin-top: 200rpx;" @click="nextStep()">
				<text class="btnValue">下一步</text>
			</view>
		</view>


		<view class="form" v-if="step == 0">

			<view
				style="width: 670rpx;margin-top: 140rpx;margin-bottom: 140rpx;font-size: 80rpx;letter-spacing: 5rpx;display: flex;flex-direction: row;">
				欢迎来到候浪,给自己打造一个美好的名片吧~</view>

			<view class="avatar">
				<image mode="aspectFill" @click="changeAvatar"
					style="width: 150rpx;height: 150rpx;border-radius: 50%;background-color: #f5f5f5;" :src="avatar">
				</image>
				<view style="margin-top: 20rpx;color: #5DACB1;">点击上传头像</view>
			</view>

			<view class="inputWrapper">
				<input class="input" style="background-color: #f5f5f5 !important;" type="text" v-model="nickname"
					placeholder="请输入昵称" />
			</view>
			<view class="inputWrapper">
				<input class="input" style="background-color: #f5f5f5 !important;" type="text" v-model="account"
					placeholder="请输入账号" />
			</view>
			<view class="loginBtn" style="margin-top: 200rpx;" @click="nextStep()">
				<text class="btnValue">下一步</text>
			</view>
		</view>


		<view class="form" v-if="step == 1">


			<view
				style="width: 670rpx;margin-top: 140rpx;margin-bottom: 140rpx;font-size: 80rpx;letter-spacing: 5rpx;display: flex;flex-direction: row;">
				我们还需要你的一些信息来为你提供更好的服务~</view>

			<view class="inputWrapper">
				<input class="input" style="background-color: #f5f5f5 !important;" type="text" v-model="school"
					placeholder="请输入你的学校名称" />
			</view>
			<view class="inputWrapper">
				<input class="input" style="background-color: #f5f5f5 !important;" type="text" v-model="professional"
					placeholder="请输入你的专业" />
			</view>
			<view class="loginBtn" style="margin-top: 200rpx;" @click="nextStep()">
				<text class="btnValue">下一步</text>
			</view>


			<view style="color: gray;margin-top: 100rpx;" @click="register()">跳过</view>
		</view>

		<view class="form" v-if="step == 2">


			<view
				style="width: 670rpx;margin-top: 140rpx;margin-bottom: 140rpx;font-size: 80rpx;letter-spacing: 5rpx;display: flex;flex-direction: row;">
				简单自我介绍一下吧~</view>

			<view class="inputWrapper">
				<input class="input" style="background-color: #f5f5f5 !important;" type="text" v-model="summary"
					placeholder="请输入个性签名" />
			</view>
			<view class="textareaWrapper">
				<textarea :show-confirm-bar="false"
					style="background-color: #f5f5f5 !important;padding: 30rpx;height: 600rpx;" type="text"
					v-model="description" placeholder="请输入自我介绍"></textarea>
			</view>
			<view class="loginBtn" style="margin-top: 100rpx;" @click="nextStep()">
				<text class="btnValue">下一步</text>
			</view>


			<view style="color: gray;margin-top: 100rpx;" @click="register()">跳过</view>
		</view>

		<view class="form" v-if="step == 3">


			<view
				style="width: 670rpx;margin-top: 140rpx;margin-bottom: 40rpx;font-size: 80rpx;letter-spacing: 5rpx;display: flex;flex-direction: row;">
				最后一步啦~请提出一个你关心的问题，并写出你的观点和回答~</view>

			<view class="inputWrapper">
				<input class="input" style="background-color: #f5f5f5 !important;" type="text" v-model="title"
					placeholder="请输入问题标题" />
			</view>
			<view class="inputWrapper">
				<input class="input" style="background-color: #f5f5f5 !important;" type="text" v-model="point"
					placeholder="请输入观点" />
			</view>
			<view class="textareaWrapper">
				<textarea :show-confirm-bar="false"
					style="background-color: #f5f5f5 !important;padding: 30rpx;height: 600rpx;" type="text"
					v-model="answer" placeholder="请输入简短回答"></textarea>
			</view>
			<view class="loginBtn" style="margin-top: 40rpx;" @click="register()">
				<text class="btnValue">注册</text>
			</view>


			<view style="color: gray;margin-top: 40rpx;" @click="register()">跳过</view>
		</view>

	</view>
</template>

<script>
	import http from '@/common/service/service.js';
	import UploadOss from '@/common/util/UploadOss'
	import {
		mapActions
	} from "vuex";

	export default {
		data() {
			return {
				tel: "",
				code: "",
				account: "",

				unionId: null,
				miniOpenId:null,
				step: -1,

				nickname: '',
				avatar: '',

				school: '',
				professional: '',

				summary: '',
				description: '',

				title: '',
				point: '',
				answer: '',
				smsCountDown: 0, // 验证码倒计时
			}
		},
		computed: {
			isSendSMSEnable() {
				return this.smsCountDown <= 0 && this.tel && this.tel.length > 4;
			},
			getSendBtnText() {
				if (this.smsCountDown > 0) {
					return this.smsCountDown + '秒后';
				} else {
					return '发送验证码';
				}
			},
		},
		onLoad(options) {
			if (options.unionId) {
				this.unionId = options.unionId
				if(options.miniOpenId){
					this.miniOpenId = options.miniOpenId
				}
			} else {
				this.tel = options.tel
				this.step = 0
			}
		},
		methods: {
			nextStep() {
				if (this.step == -1) {
					this.$api.verifyPhoneCode({
						tel: this.tel,
						code: this.code,
						unionId: this.unionId,
						miniOpenId: this.miniOpenId,
					}).then(res => {
						if (res.success) {
							if(res.data){
								uni.setStorageSync("X-Access-Token", res.data);
								uni.setStorageSync("SHOW_LOGIN_WAY", true);
								uni.switchTab({
									url: '/pages/self/self'
								})
							}else{
								this.step = this.step + 1
							}
						}
					})
				} else {
					if (this.nickname == '') {
						uni.showToast({
							icon: 'error',
							title: "昵称不能为空"
						})
					} else if (this.account == '') {
						uni.showToast({
							icon: 'error',
							title: "账号不能为空"
						})
					} else {
						this.step = this.step + 1
					}
				}
			},

			changeAvatar() {
				uni.chooseImage({
					count: 9, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: (res) => {
						UploadOss.uploadFile(res).then(res => {
							this.avatar = res
						})
					}
				});
			},




			register() {
				this.$api.register({
					tel: this.tel,
					account: this.account,
					unionId: this.unionId,
					miniOpenId: this.miniOpenId,
					nickname: this.nickname,
					avatar: this.avatar,
					school: this.school,
					professional: this.professional,
					summary: this.summary,
					description: this.description,
					title: this.title,
					point: this.point,
					answer: this.answer,
				}).then(res => {
					uni.setStorageSync("X-Access-Token", res.data);
					uni.setStorageSync("SHOW_LOGIN_WAY", true);
					uni.switchTab({
						url: '/pages/self/self'
					})
				})
			},


			onSMSSend() {
				if (this.smsCountDown > 0)
					return;
				let smsParams = {
					tel: this.tel,
					email: ""
				};
				let checkPhone = new RegExp(/^1([3-9])\d{9}$/);
				if (!smsParams.tel || smsParams.tel.length === 0) {
					uni.showToast({
						icon: 'error',
						title: "手机号不能为空"
					})
					return false;
				}
				if (!checkPhone.test(smsParams.tel)) {
					uni.showToast({
						icon: 'error',
						title: "手机号不合法"
					})
					return false;
				}
				console.log(smsParams)
				this.$api.sendVerificationCode(smsParams)
				this.smsCountDown = 60;
				this.startSMSTimer();
			},
			startSMSTimer() {
				this.smsCountInterval = setInterval(() => {
					this.smsCountDown--;
					if (this.smsCountDown <= 0) {
						clearInterval(this.smsCountInterval);
					}
				}, 1000);
			},
		}
	}
</script>

<style scoped lang="scss">
	.content {
		background: #FFFFFF;
		width: 750rpx;
		height: 100vh;
		display: flex;
		flex-direction: column;
		align-items: center;

		.form {
			display: flex;
			flex-direction: column;
			align-items: center;

			.avatar {
				margin-top: 40rpx;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
			}

			.inputWrapper {
				width: 600rpx;
				height: 120rpx;
				background: white;
				border-radius: 20rpx;
				overflow: hidden;
				box-sizing: border-box;
				margin-top: 30rpx;
			}

			.textareaWrapper {
				width: 600rpx;
				height: 400rpx;
				background: white;
				border-radius: 20rpx;
				overflow: hidden;
				box-sizing: border-box;
				margin-top: 30rpx;
			}

			.inputWrapper .input {
				width: 520rpx;
				padding: 0 40rpx;
				height: 100%;
				border-radius: 20rpx;
				font-size: 15px;
			}

			.loginBtn {
				width: 600rpx;
				height: 100rpx;
				background: #5DACB1;
				border-radius: 20rpx;
				margin-top: 30rpx;
				display: flex;
				justify-content: center;
				align-items: center;

			}

			.loginBtn .btnValue {
				color: white;
			}

		}

	}
</style>
